<template>
    <div class="page-container-inner">
        <h4 class="text-lg p-1 pb-0">{{ $t('game.setting.server.title') }}</h4>
        <div class="py-8 text-center" v-if="serverStatus!='dle'">
            <component-page-loading :status="serverStatus" @reload="getServerStatus"></component-page-loading>
        </div>
        <div class="pt-8 pb-3" v-else>
            <el-form label-width="180px" class="detail">
                <!--全服状态-->
                <el-form-item :label="$t('game.setting.server[80]')">
                    <el-tag effect="plain" size="mini" :type="!server[80].enable ? 'danger' : 'success'">
                        {{ $t('form.switchList')[server[80].enable].label }}
                    </el-tag>
                    <span class="operation-options-icon ml-1">
                       <i class="el-icon-edit" @click="dialogServerFull"></i>
                    </span>
                </el-form-item>
                <!--关闭游戏-->
                <el-form-item :label="$t('game.setting.server[81]')">
                    <el-tag effect="plain" size="mini" type="info" v-if="!server[81].length">
                        {{ $t('messages.empty') }}
                    </el-tag>
                    <span class="divide-x-2 divide-gray-200 -mx-3" v-else>
                        <component-page-games v-for="game in server[81]" :key="game.code" class="px-3"
                                              :game-code="game.code" :game-name="game.name">
                        </component-page-games>
                    </span>
                    <span class="operation-options-icon ml-1">
                        <i class="el-icon-edit" @click="dialogServerGame"></i>
                    </span>
                </el-form-item>
                <!--关闭平台-->
                <el-form-item :label="$t('game.setting.server[82]')">
                    <el-tag effect="plain" size="mini" type="info" v-if="!server[82].length">
                        {{ $t('messages.empty') }}
                    </el-tag>
                    <span class="divide-x-2 divide-gray-200 -mx-3" v-else>
                        <span v-for="org in server[82]" class="px-3">{{ org.name }}</span>
                    </span>
                    <span class="operation-options-icon ml-1">
                        <i class="el-icon-edit" @click="dialogServerPlatform"></i>
                    </span>
                </el-form-item>
            </el-form>
        </div>
        <!--全服状态-->
        <el-dialog :title="$t('game.setting.server[80]')" center width="320px" :visible.sync="dialog.visible[80]">
            <div class="text-center" v-html="$t('confirm.server', { status: server[80].enable ? $t('action.close') : $t('action.open') })"></div>
            <div slot="footer">
                <el-button :type="['primary','danger'][server[80].enable]" @click="updateServerFull">{{ $t('action.confirm') }}</el-button>
                <el-button @click="dialog.visible[80] = false">{{ $t('action.cancel') }}</el-button>
            </div>
        </el-dialog>
        <!--关闭游戏-->
        <el-dialog :title="$t('game.setting.server[81]')" center width="320px" :visible.sync="dialog.visible[81]">
            <component-page-game-option v-model="dataCache.codes" class="block"></component-page-game-option>
            <div slot="footer">
                <el-button type="primary" @click="updateServerGame">{{ $t('action.save') }}</el-button>
                <el-button @click="dialog.visible[81] = false">{{ $t('action.cancel') }}</el-button>
            </div>
        </el-dialog>
        <!--关闭平台-->
        <el-dialog :title="$t('game.setting.server[82]')" center width="320px" :visible.sync="dialog.visible[82]">
            <component-page-org-tree-option-check v-model="dataCache.codes" check-strictly block></component-page-org-tree-option-check>
            <div slot="footer">
                <el-button type="primary" @click="updateServerPlatform">{{ $t('action.save') }}</el-button>
                <el-button @click="dialog.visible[82] = false">{{ $t('action.cancel') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "Server",
    data() {
        return {
            serverStatus: 'dle',
            server: {
                80: {enable: 1},
                81: [],
                82: [],
            },
            dataCache: {
                codes: [],
            },
            dialog: {
                visible: {
                    80: false,
                    81: false,
                    82: false,
                }
            },
            msg: {
                code: 200,
                message: '',
                errors: {},
            }
        }
    },
    created() {
        // 获取游戏服状态
        this.getServerStatus();
    },
    methods: {
        getServerStatus() {
            this.serverStatus = 'loading';
            axios.get('/game/setting/maintenance/getServerStatus').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.server = response.data.resp_data;
                    this.serverStatus = 'dle';
                } else {
                    this.serverStatus = 'error';
                }
            })
        },
        // 显示模态框【全服开关】
        dialogServerFull() {
            this.dialog.visible[80] = true;
        },
        // 更新配置【全服开关】
        updateServerFull() {
            // 关闭提示框
            this.dialog.visible[80] = false;
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/setting/maintenance/updateServerStatus', {
                type: 80,
                80: {enable: this.server[80].enable ? 0 : 1}
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {
                            status: this.server[80].enable ? this.$t('action.close') : this.$t('action.open')
                        }),
                        showClose: true
                    });
                    // 更新数据
                    this.server[80] = response.data.resp_data;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {
                            status: this.server[80].enable ? this.$t('action.close') : this.$t('action.open')
                        }) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        // 显示模态框【关闭游戏】
        dialogServerGame() {
            this.dialog.visible[81] = true;
            // 初始化验证
            this.initMsg();
            // 初始化code
            this.dataCache.codes = _.map(this.server[81], 'code');
        },
        // 更新配置【关闭游戏】
        updateServerGame() {
            // 关闭提示框
            this.dialog.visible[81] = false;
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/setting/maintenance/updateServerStatus', {
                type: 81,
                81: this.dataCache.codes
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.save')}),
                        showClose: true
                    });
                    // 更新数据
                    this.server[81] = response.data.resp_data;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.save')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
        // 显示模态框【关闭平台】
        dialogServerPlatform() {
            this.dialog.visible[82] = true;
            // 初始化验证
            this.initMsg();
            // 初始化code
            this.dataCache.codes = _.map(this.server[82], 'code');
        },
        // 更新配置【关闭平台】
        updateServerPlatform() {
            // 关闭提示框
            this.dialog.visible[82] = false;
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/setting/maintenance/updateServerStatus', {
                type: 82,
                82: this.dataCache.codes
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.save')}),
                        showClose: true
                    });
                    // 更新数据
                    this.server[82] = response.data.resp_data;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.save')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style lang="scss">

</style>
